<template>
		<div id="r-biao1" style="width:100%;height:90%;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'recyclingRanking',
  props: ['recyclingRanking'],
  data () {
    return {
      // 页面查询数据
      data: [],
      areaData: [],
      queryData: {
        selectArea: 0,
        date: []
      },
      myChart: null,
      option: {

      }
    }
  },
  mounted () {
    const that = this
    setTimeout(() => {
      that.hadleGetFilesListApi()
    })
  },
  methods: {
    hadleGetFilesListApi (x, y) {
      const option = {
        title: {
          text: '回收小区排名',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 20
          },
          x: 'right'
          // y:'top'
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {

          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              // color: '#c3dbff',  //更改坐标轴文字颜色
              fontSize: 16 // 更改坐标轴文字大小
            }
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
            }
          }

        },
        yAxis: {
          type: 'category',

          data: y,
          axisLabel: {
            show: true,
            textStyle: {
              // color: '#c3dbff',  //更改坐标轴文字颜色
              fontSize: 12 // 更改坐标轴文字大小
            }
          },
          axisLine: {
            lineStyle: {
              color: '#FFFFFF',
              width: 1
            }
          }
        },
        series: [{
          data: x,
          type: 'bar',
          barWidth: '50%',
          // smooth: true,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(63,227,236,0.8)'
              }, {
                offset: 0.4,
                color: 'rgba(63,227,236,0.3)'
              }, {
                offset: 1,
                color: 'rgba(63,227,236,0.00)'
              }])
              // ['rgba(63,227,236,0.3)'],
            }
          },
          itemStyle: {
            color: ['#3FE3EC']
          }

        }]
      }
      let myChart = this.$echarts.init(document.getElementById('r-biao1'))
      myChart.setOption(option)
      window.addEventListener('resize', function () {
				    myChart.resize()
      })
    }
  },
  watch: {
    recyclingRanking (newval, oldval) {
      var x = []
      var y = []
      for (var i = 0; i < newval.length; i++) {
        x[i] = newval[newval.length - i - 1].totalWeight
        y[i] = newval[newval.length - i - 1].comminName
      }
      this.hadleGetFilesListApi(x, y)
    }
  }
}
</script>
